<template>
  <div class="announcement" :class="{ mobile: false }">
    <div class="title">
      <span class="icon-box" :style="{ transform: `rotate(${activeIndex * 90}deg)` }">
        <i class="iconfont icon-icon_tripinfo"></i>
      </span>
    </div>
    <transition name="module" mode="out-in">
      <empty-box class="announcement-empty-box" key="empty" v-if="!announcement.length">
        <slot>理屈词穷</slot>
      </empty-box>
      <div key="swiper" class="swiper-box" v-else>
        <swiper
          class="swiper"
          :autoplay="swiperOptions.autoplay"
          :direction="swiperOptions.direction"
          :loop="swiperOptions.loop"
          :setWrapperSize="swiperOptions.setWrapperSize"
          :allowTouchMove="swiperOptions.allowTouchMove"
          :slidesPerView="swiperOptions.slidesPerView"
          @swiper="setControlledSwiper"
          @transitionStart="handleSwiperTransitionStart"
        >
          <swiper-slide v-for="(item, index) in announcement" :key="index">
            <div class="content">{{ item.content }}</div>
            <div class="content" style="color: #aaa">{{ timeAgo(item.created_time) }}</div>
          </swiper-slide>
        </swiper>
        <div class="navigation">
          <div class="button prev" :class="{ disabled: activeIndex === 0 }" @click="prevSlide">
            <i class="iconfont icon-up" />
          </div>
          <div
            class="button next"
            :class="{ disabled: activeIndex === announcement.length - 1 }"
            @click="nextSlide"
          >
            <i class="iconfont icon-down" />
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue';
import EmptyBox from "@/components/archive/empty.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import SkeletonLine from "@/components/skeleton/line.vue";
import SkeletonParagraph from "@/components/skeleton/paragraph.vue";
import { timeAgo } from "@/transforms/moment";

export default defineComponent({
  name: "announcement",
  props: {
    announcement: {
      type: Array,
      default: () => []
    },
  },
  components: {
    EmptyBox,
    SkeletonLine,
    SkeletonParagraph,
    Swiper,
    SwiperSlide,
  },
  setup() {
    const state = reactive({
      activeIndex: 0,
      swiper: null
    })
    const swiperOptions = {
      height: 34,
      autoplay: {
        delay: 3500,
        disableOnInteraction: false,
      },
      allowTouchMove: false,
      slidesPerView: 1,
      setWrapperSize: true,
      direction: "vertical",
    }
    const prevSlide = () => {
      state.swiper.slidePrev();
    }
    const nextSlide = () => {
      state.swiper.slideNext();
    }
    const handleSwiperTransitionStart = () => {
      state.activeIndex = state.swiper.activeIndex || 0;
    }

    const setControlledSwiper = (swiper) => {
      state.swiper = swiper
    }

    return {
      ...toRefs(state),
      timeAgo,
      swiperOptions,
      prevSlide,
      nextSlide,
      handleSwiperTransitionStart,
      setControlledSwiper
    }
  }
});
</script>

<style lang="scss">
$announcement-height: 42px;
$title-width: 10%;
$content-width: 100% - $title-width;
$demarcation-width: 74%;

.announcement {
  position: relative;
  margin-bottom: $lg-gap;
  height: $announcement-height;
  line-height: $announcement-height;
  font-size: $font-size-h6;
  color: $text-secondary;
  @include common-bg-module();
  @include radius-box($xs-radius);

  .announcement-empty {
    height: 100%;
    min-height: auto;
  }

  &.mobile {
    margin-bottom: $gap;

    > .swiper {
      .slide-item {
        > .content {
          max-width: 90%;
        }
      }
    }
  }

  > .title {
    float: left;
    width: $title-width;
    text-align: center;
    font-size: $font-size-base;

    .icon-box {
      display: inline-block;
      transform: rotate(0deg);
      transition: transform 0.3s;
      // .iconfont {
      //   font-size: 20px;
      // }
    }
  }

  > .swiper-box {
    float: right;
    display: flex;
    width: 90%;

    .swiper {
      flex: 1;
      height: $announcement-height;

      .swiper-slide {
        width: auto;
        display: flex;
        justify-content: space-between;
        height: $announcement-height;

        > .content {
          max-width: 76%;
          position: relative;
          font-weight: bold;
          @include text-overflow();

          ::v-deep(p) {
            margin: 0;
            max-width: 100%;
            @include text-overflow();
          }

          a {
            border-bottom: 1px solid;
          }
        }

        .date {
          color: $text-dividers;
          margin-right: $xs-gap;
        }
      }
    }
    .navigation {
      display: flex;
      flex-direction: column;
      width: 3rem;
      height: $announcement-height;

      .button {
        height: 50%;
        text-align: center;
        color: $text-dividers;
        cursor: pointer;
        @include color-transition();

        &:hover {
          color: $text;
        }

        &.disabled {
          opacity: 0.8;
          color: $text-dividers;
          cursor: no-drop;
        }

        &.prev {
          // line-height: 1.2;
          line-height: 2;
        }

        &.next {
          line-height: 1.4;
        }
      }
    }
  }
}
</style>
